<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	
<head>
    <title>Crea un nuevo Memorandum</title>
	<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/static/calendario.js"></script>
    <style>
        body
        {
            font-size: 13px;
            font-family: 'Arial';
        }
        h1
        {
            text-align: center;
            font-size: 16px;
        }
        label
        {
            width: 250px;
            display:block;
            float:left;
        }
        
        .clear
        {
            clear: both;
        }
        
        #center_content
        {
            width: 480px;
            margin: 50px auto;
        }
        
        #right_buttons
        {
            margin-top: 10px;
            float: right;
        }
        
        #msg_success
        {
            background: #E8F9E3;
            border-top: 1px solid #82C67D;
            border-bottom: 1px solid #82C67D;
            color: #6E9E69;
            padding: 2px 20px;
            margin-bottom: 10px;
        }
        
        #dato
        {
            font-weight: bold;
            text-decoration: underline;
        }
        
        #errores
        {
            background: #F7BEBE;
            border-top: 1px solid #DB4A4A;
            border-bottom: 1px solid #DB4A4A;
            color: #DB4A4A;
            padding: 10px 30px;
            margin-bottom: 20px;
        }
        
        #errores ul
        {
            list-style: disc;
            padding: 0;
            margin: 0;
        }
        
        table
        {
            font-size: 10px;
            width: 800px;
            border-collapse: collapse;
        }
        
        td#check
        {
            text-align: center;
        }
        
        input.short_in
        {
            width: 190px;
        }
    body,td,th {
	color: #455BA5;
}
</style>
  
  <script>  
    function enable_checkbox()
    {
        document.getElementById("monday_check").removeAttribute("disabled");
        document.getElementById("tuesday_check").removeAttribute("disabled");
        document.getElementById("wed_check").removeAttribute("disabled");
        document.getElementById("thursday_check").removeAttribute("disabled");
        document.getElementById("friday_check").removeAttribute("disabled");
        document.getElementById("saturday_check").removeAttribute("disabled");
    }
    </script>
    
    <script>
        function valida(form)
        {
            var id_ext = form.id_ext.value;
            var giro = form.giro.value;
            var producto = form.producto.value;
            var beneficio = form.beneficio.value;
            var nombre_evento = form.nombre_evento.value;
            var resp_marca = form.resp_marca.value;
            var telefono = form.telefono.value;
            var resp_area = form.resp_area.value;
            var ext_resp_a = form.ext_resp_a.value;
            var asociacion = form.asociacion.value;
            var div = document.getElementById('errores');
            var ul = document.getElementById('ul');
            var errores = '';
            
            if(id_ext == ''){
                errores = '<li>Favor de llenar el campo ID</li>';
            }
            else if (isNaN(id_ext)){
                    errores = '<li>El campo ID solo acepta valores numéricos</li>';
            }
            if(giro == ''){
                errores += '<li>Favor de llenar el campo Giro</li>';
            }
            if(producto == ''){
                errores += '<li>Favor de llenar el campo Producto a Promocionar</li>';
            }
            if(beneficio == ''){
                errores += '<li>Favor de llenar el campo Beneficio Obtenido</li>';
            }
            if(nombre_evento == ''){
                errores += '<li>Favor de llenar el campo Evento</li>';
            }
            if(resp_marca == ''){
                errores += '<li>Favor de llenar el campo Responsable de marca</li>';
            }
            if(telefono == ''){
                errores += '<li>Favor de llenar el campo Teléfono del responsable</li>';
            }
            if(resp_area == ''){
                errores += '<li>Favor de llenar el campo Responsable del área</li>';
            }
            if(ext_resp_a == ''){
                errores += '<li>Favor de llenar el campo Ext. del Responsable</li>';
            }
            if(asociacion == ''){
                errores += '<li>Favor de llenar el campo Asociación</li>';
            }
            
            if(errores != ''){
                div.setAttribute('style','display: display;');
                ul.innerHTML = errores;
                window.scrollTo(0,0);
                return false;
            }
            else{
                return true;
            }
        }
        
        function enable_inputs(checkbox_id, day)
        {
            var checkbox = document.getElementById(checkbox_id).checked;
            var tam = document.getElementById('tam_'+day);
            var autos = document.getElementById('autos_'+day);
            var asistentes = document.getElementById('asistentes_'+day);
            var actividades = document.getElementById('actividades_'+day);
            
            if(checkbox){
                tam.removeAttribute('disabled');
                autos.removeAttribute('disabled');
                asistentes.removeAttribute('disabled');
                actividades.removeAttribute('disabled');
            }
            else if(!checkbox){
                tam.setAttribute('disabled','disabled');
                autos.setAttribute('disabled','disabled');
                asistentes.setAttribute('disabled','disabled');
                actividades.setAttribute('disabled','disabled');
            }
            
        }
    </script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head>
<body>
    <h1><img src="/static/top.png" alt="" width="800" height="294" /></h1>
    <h1>Crear nuevo Memorandum</h1>
	<div id="center_content">
      <a name="top" href="#top"></a>
      <div id="errores" style="display: none;">
        <ul id="ul">
        </ul>
    </div>
    
    {% if error == "no" %}
    <div id="msg_success">
        <p align ="center">Memorandum <span id="dato">{{ id }}</span> creado exitosamente </p>
        <p align ="center">Fecha de Creacion: <span id="dato">{{ fecha_ini }}</span> | Fecha de Expiración: <span id="dato">{{ fecha_exp }}</span></p>
    </div>
    {% endif %}
    
    {% if error == "si" %}
        <div id="errores">
            <ul id="ul">
                <li>Hubo un error al crear el Memorandum</li>
            </ul>
        </div> 
    {% endif %}
    <form name="crea_memo" action="nmemo" method="POST" onsubmit="return valida(this)" >{% csrf_token %}
        <label>ID</label>
        <input type="text" name="id_ext" /><br>
        
        <label>Nombre de patrocinador</label>
        <select name="nombre_patrocinio" id="nombre_patrocinio">
			{% for patrocinador in tablas %}
			<option value="{{patrocinador.id}}">{{patrocinador.nombre}}</option>
			{% endfor %}
		</select><br>
        
        <label>Giro</label>
        <input type="text" name="giro" /><br>
        
        <label>Producto a promocionar</label>
        <input type="text" name="producto" /><br>
        
        <label>Beneficio obtenido</label>
        <input type="text" name="beneficio" /><br>
        
        <label>Evento</label>
        <input type="text" name="nombre_evento" /><br>
        
        <label>Responsable de marca</label>
        <input type="text" name="resp_marca" /><br>
        
        <label>Tel&eacute;fono del resposable</label>
        <input type="text" name="telefono" /><br>
        
        <label>Responsable del &aacute;rea</label>
        <input type="text" name="resp_area" /><br>
        
        <label>Ext. del responsable</label>
        <input type="text" name="ext_resp_a" /><br>
        
        <label>Asociaci&oacute;n</label>
        <input type="text" name="asociacion" /><br><br >
<div align="center">
        <label style=" text-align:center">Fecha de entrada (dd/mm/aaaa)</label>
        <input type="text" name="input_date" id="input_date" />
        <input type="button" id="setFechas" value="Aceptar" />
        <br>
        
        <table border="1">
            <tr>
                <td rowspan="3">&nbsp;</td>
                <td>Lunes</td>
                <td>Martes</td>
                <td>Miércoles</td>
            </tr>
                <td><span id="p1"></span><input type="hidden" name="date0" id="in_p1" value="" /></td>
                <td><span id="p2"></span><input type="hidden" name="date1" id="in_p2" value="" /></td>
                <td><span id="p3"></span><input type="hidden" name="date2" id="in_p3" value="" /></td>
            </tr>
            <tr>
                <td id="check"><input type="checkbox" name="selected_day" value="0" id="monday_check" disabled="disabled" onclick="enable_inputs('monday_check',0)" /></td>
                <td id="check"><input type="checkbox" name="selected_day" value="1" id="tuesday_check" disabled="disabled" onclick="enable_inputs('tuesday_check',1)"/></td>
                <td id="check"><input type="checkbox" name="selected_day" value="2" id="wed_check" disabled="disabled" onclick="enable_inputs('wed_check',2)"/></td>

            </tr>
            </tr>
                <td>Tamaño del stand</td>
                <td><input type="text" name="tam_0" id="tam_0" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="tam_1" id="tam_1" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="tam_2" id="tam_2" class="short_in" disabled="disabled" /></td>

            </tr>
            </tr>
                <td>Autos</td>
                <td><input type="text" name="autos_0" id="autos_0" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="autos_1" id="autos_1" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="autos_2" id="autos_2" class="short_in" disabled="disabled" /></td>
            </tr>
            </tr>
                <td>Asistentes</td>
                <td><input type="text" name="asistentes_0" id="asistentes_0" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="asistentes_1" id="asistentes_1" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="asistentes_2" id="asistentes_2" class="short_in" disabled="disabled" /></td>
            </tr>
            </tr>
                <td>Descripción de actividades</td>
                <td><textarea name="actividades_0" id="actividades_0" cols="25" rows="5" disabled="disabled"></textarea></td>
                <td><textarea name="actividades_1" id="actividades_1" cols="25" rows="5" disabled="disabled"></textarea></td>
                <td><textarea name="actividades_2" id="actividades_2" cols="25" rows="5" disabled="disabled"></textarea></td>
            </tr>
        </table>
        <br>
        <table border="1">
            <tr>
                <td rowspan="3">&nbsp;</td>
                <td>Jueves</td>
                <td>Viernes</td>
                <td>Sábado</td>
            </tr>
                <td><span id="p4"></span><input type="hidden" name="date3" id="in_p4" value="" /></td>
                <td><span id="p5"></span><input type="hidden" name="date4" id="in_p5" value="" /></td>
                <td><span id="p6"></span><input type="hidden" name="date5" id="in_p6" value="" /></td>
            </tr>
            <tr>
                <td id="check"><input type="checkbox" name="selected_day" value="3" id="thursday_check" disabled="disabled" onclick="enable_inputs('thursday_check',3)" /></td>
                <td id="check"><input type="checkbox" name="selected_day" value="4" id="friday_check" disabled="disabled" onclick="enable_inputs('friday_check',4)" /></td>
                <td id="check"><input type="checkbox" name="selected_day" value="5" id="saturday_check" disabled="disabled" onclick="enable_inputs('saturday_check',5)" /></td>

            </tr>
            </tr>
                <td>Tamaño del stand</td>
                <td><input type="text" name="tam_3" id="tam_3" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="tam_4" id="tam_4" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="tam_5" id="tam_5" class="short_in" disabled="disabled" /></td>

            </tr>
            </tr>
                <td>Autos</td>
                <td><input type="text" name="autos_3" id="autos_3" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="autos_4" id="autos_4" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="autos_5" id="autos_5" class="short_in" disabled="disabled" /></td>
            </tr>
            </tr>
                <td>Asistentes</td>
                <td><input type="text" name="asistentes_3" id="asistentes_3" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="asistentes_4" id="asistentes_4" class="short_in" disabled="disabled" /></td>
                <td><input type="text" name="asistentes_5" id="asistentes_5" class="short_in" disabled="disabled" /></td>
            </tr>
            </tr>
                <td>Descripción de actividades</td>
                <td><textarea name="actividades_3" id="actividades_3" cols="25" rows="5" disabled="disabled"></textarea></td>
                <td><textarea name="actividades_4" id="actividades_4" cols="25" rows="5" disabled="disabled"></textarea></td>
                <td><textarea name="actividades_5" id="actividades_5" cols="25" rows="5" disabled="disabled"></textarea></td>
            </tr>
        </table>
        </table>
</div>
        
        <div id="right_buttons">
        
            <a href="/menu"><input type="button" value="Cancelar"/></a><input type="submit" value="Registrar" />
        </div>
        <div class="clear"></div>
        
    </form>
    
</body>
</html>
